<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    .canvas{
      border: solid 2px black;
    }
  </style>
</head>
<body>
<canvas width="300px" height="200px" class="canvas canvas1">
  您的浏览器不支持canvas标签,请变更支持canvas的浏览器
</canvas>
<canvas width="300px" height="200px" class="canvas canvas2">
  您的浏览器不支持canvas标签,请变更支持canvas的浏览器
</canvas>
<canvas width="300px" height="200px" class="canvas canvas3">
  您的浏览器不支持canvas标签,请变更支持canvas的浏览器
</canvas>
<script>
  var	$canvas1 = document.querySelector(".canvas1");
  var	$canvas2 = document.querySelector(".canvas2");
  var	$canvas3 = document.querySelector(".canvas3");
  var pen1 = $canvas1.getContext('2d');
  var pen2 = $canvas2.getContext('2d');
  var pen3 = $canvas3.getContext('2d');

  pen1.beginPath();
  pen2.beginPath();
  pen3.beginPath();
  var tempImg= new Image();
  tempImg.src='../static/demo-image.jfif';
  tempImg.onload = function() {
    /**
     * @params image
     * @params dx 在画布上放置图像的 x 坐标位置。
     * @params dy 在画布上放置图像的 y 坐标位置。
     */
    pen1.drawImage(tempImg, 50, 50);
    /**
     * @params image
     * @params dx 在画布上放置图像的 x 坐标位置。
     * @params dy 在画布上放置图像的 y 坐标位置。
     * @params dw 可选。要使用的图像的宽度（伸展或缩小图像）。
     * @params dh 可选。要使用的图像的高度（伸展或缩小图像）。
     */
    pen2.drawImage(tempImg, 50, 50, 200, 200);
    /**
     * @params image
     * @params sx 可选。开始剪切的 x 坐标位置。
     * @params sy 可选。开始剪切的 y 坐标位置。
     * @params sw 可选。被剪切图像的宽度。
     * @params sh 可选。被剪切图像的高度。
     * @params dx 在画布上放置图像的 x 坐标位置。
     * @params dy 在画布上放置图像的 y 坐标位置。
     * @params dw 可选。要使用的图像的宽度（伸展或缩小图像）。
     * @params dh 可选。要使用的图像的高度（伸展或缩小图像）。
     */
    pen3.drawImage(tempImg, 50, 50, 200, 200, 0, 0, 200, 200);
  };

  pen1.closePath();
  pen2.closePath();
  pen3.closePath();

</script>

</body>

</html>
